<!--
 * @Author: gxl
 * @email: 1515533507@qq.com
 * @Date: 2021-08-17 15:40:13
 * @LastEditTime: 2022-04-09 12:47:58
 * @FilePath: \blog_web\src\views\blog\Blog.vue
-->
<template>
  <div class="blog-container">
    <!-- 放返回值的容器 -->
    <el-card
      class="box-card article"
      v-for="item in articles"
      :key="item.id"
      shadow="hover"
      @click.native="articleClick(item)"
    >
      <div class="user-info">
        <!-- 用户的头像 -->
        <img :src="item.author.avatar" class="user-avatar" alt="" />
        <!-- 用户的名称 -->
        <div class="user-name">{{ item.author.name }}</div>
      </div>
      <!-- 文章部分 -->
      <div class="article-info">标题:{{ item.article_title }}</div>
      <!-- 标签部分 -->
      <div class="label" :class="labelClass(item.label_name)">
        {{ item.label_name }}
      </div>
    </el-card>
    <!-- 分页组件 -->
    <Pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pagination.pageNum"
      :limit.sync="pagination.pageSize"
      @pagination="this.getTabtList"
    />
  </div>
</template>

<script>
// 导入发送请求的接口
import { getBlogList } from '@/api/blog'
// 导入分页器
import Pagination from '@/components/Pagination'
export default {
  name: 'Blog',
  components: {
    Pagination
  },
  data() {
    return {
      // 分页器的总数
      total: 0,
      pagination: {
        pageNum: 0,
        pageSize: 10
      },
      // 博文的列表
      articles: []
    }
  },
  created() {
    this.getTabtList()
  },
  computed: {},
  methods: {
    labelClass(label_name) {
      // return;
      if (label_name == '吐槽') {
        return 'bgYellow'
      } else if (label_name == '说说') {
        return 'bgGreen'
      } else if (label_name == '表白') {
        return 'bgRed'
      } else {
        return 'bgBlue'
      }
    },
    // 获取博文的列表
    getTabtList() {
      getBlogList({ ...this.pagination }).then((res) => {
        console.log('res', res)
        if (res.code == 200) {
          this.articles = res.result.result
          this.total = res.result.total
          // 将数据保存到vuex
          this.$store.commit('blog/setBlogs', res.result.result)
        }
      })
    },
    // 每篇文章的点击事件
    articleClick(item) {
      console.log('点击了', item)
      // 跳转到详情页面
      this.$router.push({
        // 跳转的path
        name: 'detail',
        params: {
          id: item.id,
          detail: item
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.blog-container {
  .article {
    margin-bottom: 20px;
    cursor: pointer;
    :last-child {
      margin-bottom: 0;
    }
    .user-info {
      display: inline-block;
      .user-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .user-name {
        text-align: center;
        margin-left: -15px;
      }
    }
    .article-info {
      display: inline-block;
      margin-top: 10px;
      vertical-align: top;
    }
    .label {
      float: right;
      width: 80px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      border-radius: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      // margin-right: 0;
      // display: inline-block;
    }
  }
}

// 各种条件的颜色
.bgYellow {
  background: rgb(255, 193, 19);
}
.bgGreen {
  background: rgb(40, 167, 48);
}
.bgRed {
  background: rgb(220, 52, 68);
}
.bgBlue {
  background: rgb(9, 123, 254);
}
</style>
